<template>
  <div>
    <section-box title="主题库" class="random-box" style="margin-bottom: 25px">
      <el-table
        ref="multipleTable"
        v-loading="loadingOut"
        row-key="paperId"
        :data="juanPaperOut"
        max-height="250"
        @row-click="singleMain"
      >
        <el-table-column align="center" width="55" label="选择">
          <template slot-scope="scope">
            <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
            <el-radio class="radio" v-model="mainSelection" :label="scope.row.courseId"
              >&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="题库编号" align="center" prop="courseCode" />
        <el-table-column label="题库名称" align="center" prop="courseSubject" />
        <el-table-column label="题库类型" align="center" prop="courseType" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.course_type" :value="scope.row.courseType" />
          </template>
        </el-table-column>
        <el-table-column label="建设方式" align="center" prop="courseConstruction">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.construction" :value="scope.row.courseConstruction" />
          </template>
        </el-table-column>
        <el-table-column label="题卷量" align="center" prop="courseCount" />
        <el-table-column label="负责人" align="center" prop="person"/>
        <el-table-column label="适用层次类型" align="center" prop="courseHierarchy">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.hierarchy" :value="scope.row.courseHierarchy" />
          </template>
        </el-table-column>
        <el-table-column label="适用专业" align="center" prop="majorName" />
        <el-table-column label="适用课程" align="center" prop="course" />
      </el-table>

      <pagination
        v-show="totalOut > 0"
        :total="totalOut"
        :page.sync="queryParamsOut.pageNum"
        :limit.sync="queryParamsOut.pageSize"
        @pagination="getOutList"
      />
    </section-box>

    <section-box title="从题库" class="random-box" style="margin-bottom: 25px">
      <el-table v-loading="loading" :data="juanPaperList" max-height="250" @row-click="singleSecondary">
        <el-table-column align="center" width="55" label="选择">
          <template slot-scope="scope">
            <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
            <el-radio class="radio" v-model="secondarySelection" :label="scope.row.courseId"
              >&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="题库编号" align="center" prop="courseCode" />
        <el-table-column label="题库名称" align="center" prop="courseSubject" />
        <el-table-column label="题库类型" align="center" prop="courseType" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.course_type" :value="scope.row.courseType" />
          </template>
        </el-table-column>
        <el-table-column label="建设方式" align="center" prop="courseConstruction">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.construction" :value="scope.row.courseConstruction" />
          </template>
        </el-table-column>
        <el-table-column label="题卷量" align="center" prop="courseCount" />
        <el-table-column label="负责人" align="center" prop="person"/>
        <el-table-column label="适用层次类型" align="center" prop="courseHierarchy">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.hierarchy" :value="scope.row.courseHierarchy" />
          </template>
        </el-table-column>
        <el-table-column label="适用专业" align="center" prop="majorName" />
        <el-table-column label="适用课程" align="center" prop="course" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </section-box>

    <div class="dialog-footer flex">
      <el-button type="primary" style="margin-right: 40px" :loading="buttonLoading" @click="submitRandom">合并</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </div>
</template>

<script>
  import SectionBox from '../../juan/juanGenerate/components/SectionBox.vue'
  import { listJuanCourse, mergeCourse } from "@/api/system/juanCourse";

  export default {
    name: 'JuanPaper',
    dicts: ['hierarchy','course_type','construction'],
    components: { SectionBox },
    props: {
      courseId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        loadingOut: false,
        // 总条数
        total: 0,
        totalOut: 0,
        // 试卷表格数据
        juanPaperOut: [],
        juanPaperList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          courseId: undefined
        },
        queryParamsOut: {
          pageNum: 1,
          pageSize: 10,
          courseId: undefined
        },

        mainSelection: null,
        secondarySelection: null,
      }
    },
    mounted() {
      this.queryParams.courseId = this.courseId
      this.queryParamsOut.courseId = this.courseId
      this.handleQuery()
      this.handleQueryOut()
    },
    methods: {
      /** 待抽取试卷列表 */
      getList() {
        this.loading = true
        listJuanCourse(this.queryParams)
          .then((response) => {
            this.juanPaperList = response.rows
            this.total = response.total
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },

      /** 已抽取试卷列表 */
      getOutList() {
        this.loadingOut = true
        listJuanCourse(this.queryParamsOut)
          .then((response) => {
            this.juanPaperOut = response.rows
            this.totalOut = response.total;
            this.loadingOut = false
          })
          .catch(() => {
            this.loadingOut = false
          })
      },
      // 取消按钮
      cancel() {
        this.open = false
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.handleQuery()
      },
      /** 搜索按钮操作 */
      handleQueryOut() {
        this.queryParamsOut.pageNum = 1
        this.getOutList()
      },
      /** 重置按钮操作 */
      resetQueryOut() {
        this.handleQueryOut()
      },
      //合并
      submitRandom() {
        if(!this.mainSelection) {
          this.$modal.msgWarning("请选择主题库");
          return
        }
        if(!this.secondarySelection) {
          this.$modal.msgWarning("请选择从题库");
          return
        }
        if(this.mainSelection == this.secondarySelection) {
          this.$modal.msgWarning("主从题库不能选择同一个");
          return
        }

        this.buttonLoading = true
        const params = {
          mainId: this.mainSelection,
          ids: [this.secondarySelection]
        }
        mergeCourse(params).then(() => {
          this.$modal.msgSuccess("合并成功");
          this.$emit('success')
        })
        .catch(() => {})
        .finally(() => {
          this.buttonLoading = false;
        });
      },
      //关闭弹窗
      close() {
        this.$emit('close')
      },
      singleMain(row) {
        this.mainSelection = row.courseId
      },
      singleSecondary(row) {
        this.secondarySelection = row.courseId
      },
    }
  }
</script>
<style lang="scss" scoped>
.random-box {
  ::v-deep {
    .section-header {
      background: transparent !important;
    }
    .section-body {
      padding: 0 !important;
      overflow-x: hidden;
    }
  }
}


.radio {
  ::v-deep {
    .el-radio__label {
      display: none;
    }
  }
}
</style>
